<template>
  <div class="checkEdit">
    <el-button type="text" size="small" @click="look()" v-if="getButtonConfig&&getButtonConfig.check">查看</el-button>
    <el-button type="text" size="small" @click="revise()" v-if="getButtonConfig&&getButtonConfig.edit">编辑</el-button>
    <el-dialog :title="title" v-model="dialogFormVisible" :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" style="margin-left:100px">
          <el-form-item label="名称" prop="name">
            <el-col :span="18"><el-input v-model.trim="form.name" :disabled="check"></el-input></el-col>
          </el-form-item>
          <el-form-item label="类型" prop="roleType">
            <el-col :span="8">
              <el-radio-group v-model="form.roleType" :disabled="check">
                <el-radio label="NORMAL">普通类型</el-radio>
                <el-radio label="ORGANIZATION">机构负责人</el-radio>
              </el-radio-group>
            </el-col>
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-col :span="18">
              <el-input  type="textarea"  v-model.trim="form.description"
                         :autosize="{ minRows: 2, maxRows: 4}"
                         placeholder="请输入内容" :disabled="check">
              </el-input>
            </el-col>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel" class="cancelBtn">取 消</el-button>
        <el-button type="primary" @click="toEdit" v-if="check" class="commonBtn" v-show="getButtonConfig&&getButtonConfig.edit">编辑</el-button>
        <el-button type="primary" @click="submitRevise('form')"  v-if="!check" class="commonBtn">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {postLog} from 'api/common'
  export default {
    props:['id','name'],
    data() {
      let validatePass=(rule,value,callback)=>{
          let regExp=/^[A-Za-z\u4e00-\u9fa5]+$/;
          if(value==''){
              return callback(new Error('请输入角色名称'))
          }
          setTimeout(()=>{
              if(regExp.test(value)==false){
                callback(new Error('亲，只能输入中文及英文'))
              }else{
                  callback();
              }
          })
      }
      return {
        title:'基本信息',
        check:true,
        form: {
            creator:'',
            name:'',
            roleType:'',
            description:''
        },
        rules:{
            name:[
                {required:true,message:'请输入角色名称',trigger:'blur'},
                {min:0,max:30,message:'不超过30个字',trigger:'blur'},
                {validator:validatePass,trigger:'blur'}
            ],
            description:[
              { required: true, message: '请输入描述', trigger: 'blur' },
              { min: 0, max: 300, message: '不超过三百个字', trigger: 'blur' },
            ]
        },//验证规则
        dialogFormVisible: false
      }
    },
    computed:{
      getButtonConfig(){
            return this.$store.getters.getButtonConfig('roleManage')
      }
    },
    methods:{
      cancel(){
          this.dialogFormVisible=false
      },
      toEdit(){
          this.title='编辑';
          this.check=false;
      },
      look(){
          this.title='基本信息';
          this.dialogFormVisible=true;
          this.check=true;
          this.$http.get('/api-web/v1/api/userRole/'+this.id)
            .then((response)=>{
              let data=response.body;
              let {name,roleType,description,creator}=data.result;
              this.form.creator=creator;
              console.log(creator);
              this.form.name=name;
              this.form.roleType=roleType;
              this.form.description=description;
            })
      },
      revise(){
          this.title='编辑';
          this.$http.get('/api-web/v1/api/userRole/'+this.id)
            .then((response)=>{
              let data=response.body;
              let {name,roleType,description,creator}=data.result;
              this.form.creator=creator;
              this.form.name=name;
              this.form.roleType=roleType;
              this.form.description=description;
            });
          this.dialogFormVisible=true;
          this.check=false;
      },
      submitRevise(form){
        this.$refs[form].validate((valid) => {
          if (valid) {
            this.$http.post('/api-web/v1/api/userRole/'+this.id,this.form)
              .then((response)=>{
                
                let data=response.body;
                console.log(data)
                if(data && data.resultCode =='200'){
                  postLog('SYSTEM_ROLE_EDIT', this.id, this.name, this.form)

                }
                this.$emit('update');
                this.dialogFormVisible=false;
              },(err)=>{
                console.log(err);
              })
          } else {
            return false;
          }
        });
      }
    }
  };
</script>
<style scoped>

</style>
